<%--
  Created by IntelliJ IDEA.
  User: asus
  Date: 2020/5/16
  Time: 9:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="true"%>
<html>
<head>
    <title>商品类型</title>
    <%@include file="/comm/head.jsp"%>
</head>
<body>
<div id="root">
    <Collapse value="search">
        <Panel name="search">
            条件查询
            <p slot="content">
                <i-form inline :label-width="80">

                    <form-item label="商品名:">
                        <i-input type="text" v-model="goodsTypeVo.type"/>
                    </form-item>

                    <i-button type="primary" style="margin-left:20px" @click="pageNo=1;search();">搜索</i-button>
                </i-form>
            </p>
        </Panel>
    </Collapse>

    <card>
        <i-button type="success" @click="toAdd">添加商品</i-button>
    </card>
    <i-table :columns="myColumns" :data="pageResult.rows" :height="300" border stripe @on-selection-change="tableSelection=arguments[0]">
        <template slot-scope="{row,index}"  slot="action">
                <i-button type="warning" @click="toUpdate(row)">修 改</i-button>

                <i-button type="error" @click="del(row,index)">删 除</i-button>
        </template>
    </i-table>

    <modal v-model="addFlag" title="添加商品类型" @on-ok="add">
        <i-form :label-width="80" style="padding: 30px" >
            <form-item label="商品类型">
                <i-input v-model="goodsType.type1" size="large"/>
            </form-item>
        </i-form>
    </modal>
    <modal v-model="updateFlag" title="修改商品类型" @on-ok="update">
        <i-form :label-width="80" style="padding: 30px" >
            <form-item label="商品类型">
                <i-input v-model="goodsType.type1" size="large"/>
            </form-item>
        </i-form>
    </modal>

    <Page :total="pageResult.total"
          :page-size="pageSize"<%--每页条数--%>
          @on-change="pageNo=arguments[0];search();"
          show-sizer<%--是否显示分页，用来改变page-size--%>
          :page-size-opts="[5,10,15]"<%--每页条数切换的配置--%>
          @on-page-size-change="pageSize=arguments[0];search();"<%--切换每页数时的回调，返回切换后的每页条数--%>
    />
</div>
<script>

    new Vue({
        el:"#root",
        data:{
            myColumns:[
                // {type:"selection",width:60,align:"center"},
                {title:"编号",key: "id"},
                {title:"商品类型",key: "type1"},
                {title:"操作",slot:"action"}
            ],
           // myData:[],
            goodsTypeVo:{},
            goodsType:{},
            pageResult:{
                rows:[],
                total:50
            },
            pageNo:1,
            pageSize:5,
            addFlag:false,
            updateFlag:false

        },
        mounted(){
            this.search();
        },
        methods:{
            search(){
                    axios.get(`${ctx}/sys/goodstype/list/${this.pageNo}/${this.pageSize}`,{params:this.goodsTypeVo})
                        .then(({data})=>{
                            console.log(data.result);
                            this.pageResult=data.result;
                        });
                },
            toAdd(){
                this.goodsType = {};
                this.addFlag=true;

            },
            add(){
                axios.post(`${ctx}/sys/goodstype/add`,this.goodsType)
                    .then(({data})=>{
                        this.addFlag=false;//关闭模态框
                        iview.Message.success({content:data.msg});
                        this.search();
                    });
            },
            del(row,index){
                let _this=this;
                let flag= iview.Modal.confirm({
                    title:"您确实要删除么？",
                    content:"该操作不可逆，请谨慎操作。",
                    onOk(){
                        axios.get(`${ctx}/sys/goodstype/del?id=${row.id}`)
                            .then(({data})=>{
                                iview.Message.success({content:data.msg});
                                _this.search();
                            });
                    }
                });
            },
            toUpdate(row){
                Object.assign(this.goodsType,row);
                this.updateFlag=true;
            },
            update(){
                axios.post(`${ctx}/sys/goodstype/update`,this.goodsType)
                    .then(({data})=>{
                        this.updateFlag=false;//关闭模态框
                        iview.Message.success({content:data.msg});
                        this.search();
                    });

            },
        }

    });
</script>
</body>
</html>
